<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动物体类</title>
    <style>

    </style>
</head>

<body>

</body>

</html>
<script src="./jquery-3.4.1.js"></script>
<script src="./jquery-1.8.3.min.js"></script>
<script>


    // 地图类
    // width(宽), height（高）,step（速度）， bg_img(背景图)，bg_top（背景图移动）
    class MAP {
        constructor(json) {
            let default_obj = {
                width: "480px",
                height: "700px",
                step: 1,
                bg_img: "img/bg.jpg",
                bg_top: 0
            }
            for (let key in default_obj) {
                if (json[key] != undefined) {
                    this[key] = json[key];
                } else {
                    this[key] = default_obj[key];
                }
            }
            this.$ = $("<div></div>");
            this.father = document.body;
            this.timer = null;
        }
        create_ui() {
            this.$.css({
                "position": "relative",
                "margin": "0 auto",
                "overflow": "hidden",
                "width": this.width,
                "height": this.height,
                "background-image": "url(" + this.bg_img + ")",
                "background-position-y": this.bg_top + "px",
            });
            this.father.appendChild(this.$[0]);
        }
        move() {
            this.timer = setInterval(() => {
                this.bg_top += this.step;
                if (this.bg_top >= 853) {
                    this.bg_top = 0;
                }
                this.$.css({ "background-position-y": this.bg_top + "px" });
            }, 10)
        }
        start() {
            this.create_ui();
            this.move();
        }
    }
    // 2移动的物体类
    class Mover {
        constructor(json) {
            let default_obj = {
                width: "50px",
                height: "70px",
                step: 5,
                bg_img: "img/我的飞机.gif",
                dir_l: 0,
                dir_t: 0
            }
            for (let key in default_obj) {
                if (json[key] != undefined) {
                    this[key] = json[key];
                } else {
                    this[key] = default_obj[key];
                }
            }
            this.$ = $("<img>");
            this.timer = null;
            this.t = 600;
            this.l = 480 / 2 - parseInt(this.width) / 2;
            this.map = null
        }
        create_ui() {
            this.$.attr({ "src": this.bg_img });
            this.$.css({
                "width": this.width,
                "height": this.height,
                "position": "absolute",
                "top": this.t + "px",
                "left": this.l + "px",
            })
            this.map.$.append(this.$);
        }
        move() {
            this.timer = setInterval(() => {
                this.t += this.step * this.dir_t;
                this.l += this.step * this.dir_l;
                if (parseInt(this.map.height) - parseInt(this.height) <= this.t) {
                    this.t = parseInt(this.map.height) - parseInt(this.height);
                }
                if (this.t <= 0) {
                    this.t = 0;
                }
                if (parseInt(this.map.width) - parseInt(this.width) <= this.l) {
                    this.l = parseInt(this.map.width) - parseInt(this.width);
                }
                if (this.l <= 0) {
                    this.l = 0;
                }
                this.$.css({ "top": this.t + "px", });
                this.$.css({ "left": this.l + "px", });
            }, 20)
        }
        start() {
            this.create_ui();
            this.move()
        }
    }
    // 03 玩家类
    class Player extends Mover {//继承mover类
        constructor(json) {
            super(json);
            this.bulltes = [];
            this.bulltes_timer = null;

        }
        fire() {//开火
            this.bulltes_timer = setInterval(() => {//创建子弹
                let json_01 = {
                    width: "6px",
                    height: "14px",
                    step: 8,
                    bg_img: "img/bullet1.png",
                    dir_l: 0,
                    dir_t: -1,
                    plane: this,
                    l: parseInt(this.$[0].offsetLeft) + 5,
                    t: parseInt(this.$[0].offsetTop) - 0
                }
                let json_02 = {
                    width: "6px",
                    height: "14px",
                    step: 8,
                    bg_img: "img/bullet1.png",
                    dir_l: 0,
                    dir_t: -1,
                    plane: this,
                    l: parseInt(this.$[0].offsetLeft) + 40,
                    t: parseInt(this.$[0].offsetTop) - 0
                }


                let bulltes_01 = new Bulltes(json_01);//调用子弹json
                let bulltes_02 = new Bulltes(json_02);

                bulltes_01.map = this.map;
                bulltes_02.map = this.map;
                bulltes_01.start()
                bulltes_02.start()
                this.bulltes.push(bulltes_01)
                this.bulltes.push(bulltes_02)
            }, 200)

        }
        control() {
            document.body.onkeydown = (event) => {//键盘按下
                let evt = event || window.event;
                switch (evt.keyCode) {//获取按键的键码
                    case 38: //上
                        this.dir_t = -1;
                        break;
                    case 40: //下
                        this.dir_t = 1;
                        break;
                    case 37: //左
                        this.dir_l = -1;
                        break;
                    case 39: //右
                        this.dir_l = 1;
                        break;

                }
            }
            document.body.onkeyup = (event) => {
                let evt = event || window.event;
                this.dir_t = 0;
                this.dir_l = 0;

            }
        }
        start() {
            this.create_ui();
            this.move();
            this.control();
            this.fire();
        }
    }

//子弹类
    class Bulltes extends Mover {
        constructor(json) {
            super(json);
            this.plane = json.plane;
            this.t = json.t;
            this.l = json.l;
        }

        move() {
            this.timer = setInterval(() => {
                this.t += this.step * this.dir_t;

                if (this.t <= -50) {
                    this.$.remove();
                    // this.plane.bulltes.splice(this.plane.bulltes.indexof(this), 1);
                   
                        clearInterval(this.timer);
                }
                this.$.css({ "top": this.t + "px", });
                this.$.css({ "left": this.l + "px", });
                

            }, 20)
        }
    }


//敌机类
    class Enemy extends Mover{
        constructor(json){
            super(json);
        }

        move(){
            this.timer
        }
    }

    //调用地图属性（背景图移动）
    let map = new MAP({});
    map.start();
    // 调用移动物体属性
    // let mover = new Mover({});
    // mover.map = map;
    // mover.start();
    //调用玩家类 （可操控）
    let play = new Player({});
    play.map = map;
    play.start();
</script>